<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<title>music</title>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<link type="text/css" rel="stylesheet" href="../../css/pepper-grinder/jquery-ui-1.8.16.custom.css" />
	<link type="text/css" rel="stylesheet" href="css/music.css" />
	<link type="text/css" rel="stylesheet" href="../../css/jRating.jquery.css" />
	<link type="text/css" rel="stylesheet" href="../../css/popeWin.css" />
	<script type="text/javascript" src="../../js/jquery.min.js"></script>
	<script type="text/javascript" src="../../js/jquery-ui-1.8.16.custom.min.js"></script>
	<script type="text/javascript" src="../../js/jquery.mousewheel.min.js"></script>
	<script type="text/javascript" src="../../js/jRating.jquery.js"></script>
	<script type="text/javascript" src="../../js/popeScroll.js"></script>
	<script type="text/javascript" src="../../js/popeWin.js"></script>
	<script language="JavaScript" type="text/JavaScript">
		var imgNum = 1;
		var imgMax = 4;
		var playlistId;
		$(document).ready(function() {
			var cururl = window.location.href;
			playlistId = cururl.split('=')[1];
			
			if(playlistId!=null){
				$.getJSON("music_getPlaylistById.do",{playlistId:playlistId},function(json){
					$("#name").val(json.name);
					$("#descp").val(json.descp);
					$("#playlistId").val(playlistId);
					$(".img_cls").hide();
					$("#img-1").show();
				});
			}
			$(window).resize(function() {
				refresh();
			});
			
			$("#toolcontent").hover(function(){
				$(this).removeClass("transparent_0");
				$(this).addClass("transparent_class");
			},function(){
				$(this).removeClass("transparent_class");
				$(this).addClass("transparent_0");
			});
			refresh();
		});
		
		
		function goback(){
			window.parent.resizeWin("music1",0.5,0.8);
			window.location.href = "main.html";
		}


		function refresh(){
			var winheight = $(window).height();
			var winwidth = $(window).width();
			$("#bodydiv").css("height",winheight);
			$("#create_playlist").css("height",winheight*0.9);
			$("#create_div").css("height",winheight*0.9-50);
			
		}
		
		function preImg(){
			imgNum = imgNum - 1;
			if(imgNum==0){
				imgNum = imgMax;
			}
			$(".img_cls").hide();
			$("#img-"+imgNum).show();
		}
		
		function nextImg(){
			imgNum = imgNum + 1;
			if(imgNum>imgMax){
				imgNum = 1;
			}
			$(".img_cls").hide();
			$("#img-"+imgNum).show();
		}
		
		function mySave(){
			var playlistId = $("#playlistId").val();
			var name = $("#name").val();
			var descp = $("#descp").val();
			var imageUrl = $(".img_cls:visible").attr("src");
			$.get("music_savePlaylist.do",{playlistId:playlistId,name:name,descp:descp,imageUrl:imageUrl},function(data){
				if(data=="success"){
					window.parent.getMyPlaylist();
					window.parent.closePlaylist();
					
				}
			});
			
		}
		
		function myReset(){
			$("#name").val("");
			$("#descp").val("");
			$(".img_cls").hide();
			$("#img-1").show();
		}
		
	</script>
</head>
<body style="background-color=transparent;width:100%;margin-left:0px;margin-top:0px;">
	<div id="bodydiv" style="background:url(../../image/bg/7.png)">
		<div id="create_playlist">
			<div style="width: 490px;height: 400px;padding-left:10px;">
				<div style="width: 100%;height: 40px;margin-bottom: 10px;">
					<div style="width: 60%;;height: 30px;line-height: 30px;margin-bottom: 10px;font-size: 20px;float: left;"><span>创建歌单</span></div>
					
				</div>
				<div id="create_div" style="width: 100%;height: 350px;">
					<div id="playlist_name" style="width: 100%;height: 40px;margin-bottom: 10px;"> 
						<div style="width: 80px;;height: 40px;float: left;"><label >歌单标题：</label></div>
						<div style="width: 410px;height: 40px;float: left;"><input type="text" name="name" id="name" size="50"/></div>
					</div>
					<div id="playlist_image" style="width: 100%;height: 130px;margin-bottom: 10px;"> 
						<div style="width: 80px;;height: 130px;float: left;"><label >歌单封面：</label></div>
						<div style="width: 410px;height: 130px;float: left;">
							<div style="width:20px;height: 20px;margin: 55px 10px;float: left;">
								<img style="width:20px;height:20px;cursor:pointer;" title="上一个" src="images/left.png" onclick="preImg();" />
							</div>
							<div style="width:130px;height: 130px;float: left;">
								<img id="img-1" class="img_cls" src="images/playlist/img-1.png" width="130" height="130" style="cursor:pointer;"/>
								<img id="img-2" class="img_cls" src="images/playlist/img-2.png" width="130" height="130" style="cursor:pointer;display: none;"/>
								<img id="img-3" class="img_cls" src="images/playlist/img-3.png" width="130" height="130" style="cursor:pointer;display: none;"/>
								<img id="img-4" class="img_cls" src="images/playlist/img-4.png" width="130" height="130" style="cursor:pointer;display: none;"/>
							</div>
							<div style="width:20px;height: 20px;margin: 55px 10px;float: left;">
								<img style="width:20px;height:20px;cursor:pointer;" title="下一个" src="images/right.png" onclick="nextImg();" />
							</div>
						</div>
					</div>
					<div id="playlist_desc" style="width: 100%;height: 90px;margin-bottom: 10px;">
						<div style="width: 80px;height: 90px;float: left;"><label>歌单描述：</label></div>
						<div style="width: 410px;height: 40px;float: left;"><textarea rows="5" cols="50" name="descp" id="descp"></textarea></div>
					</div>
					<div id="playlist_cp" style="width: 100%;height: 40px;margin-bottom: 10px;text-align:center;"> 
						<img onclick="mySave();" title="保存" src="../../image/cover/system/white/MB_0008_save.png" style="width:24px;height:24px;cursor:pointer;" />
						<img onclick="myReset();" title="重置" src="../../image/cover/system/white/MB_0015_reload.png" style="width:24px;height:24px;cursor:pointer;" />
					</div>
					<input type="hidden" name="playlistId" id="playlistId" />
				</div>
			</div>
		</div>
	</div>
</body>
</html>